import { BarsOutlined, DatabaseOutlined, FileSyncOutlined } from '@ant-design/icons';
import { Badge, Card, Menu } from 'antd';
import React, { useState } from 'react';
import { useAccess } from 'umi';
import TableInterview from './components/TableInterview';
import { useModel } from 'umi';
import NotAccessPage from '@/components/NotAccessPage';
import { DrawerForm, PageContainer } from '@ant-design/pro-components';
import AddInterview from './components/AddInterview';

export default (): React.ReactNode => {
    const access = useAccess();
    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState || {};
    const [tabActiveKey, setTabActiveKeyState] = useState(0);
    const [reload, setReload] = useState(true);
 const [menuVisible,setMenuVisible]=useState(false)
    const handleReload = () => {
        setReload(!reload)
    }

    const renderBadge = (count: number, active = false) => {
        return (
            <Badge
                count={count}
                style={{
                    marginBlockStart: -2,
                    marginInlineStart: 4,
                    color: active ? '#1890FF' : '#999',
                    backgroundColor: active ? '#E6F7FF' : '#eee',
                }}
            />
        );
    };
    const menuList = () => {
        if (currentUser?.permissions.includes('interview:page')) {
            return [
                !access.采访要素匹配x采访媒体 && {
                    label: <span>全部任务{renderBadge(0, tabActiveKey === 0)}</span>,
                    key: 0,
                    icon: <DatabaseOutlined />,
                },
                !access.采访要素匹配x采访对象 && {
                    label: <span>我的任务{renderBadge(0, tabActiveKey === 1)}</span>,
                    key: 1,
                    icon: <FileSyncOutlined />,
                },
            ]
        } else {
            return []
        }
    }
    return (
        <PageContainer
            header={{
                title: (
                    <div>
                        <DrawerForm
                            width="200px"
                            trigger={<BarsOutlined style={{ fontSize: 20 }} />}
                            drawerProps={{
                                destroyOnClose: true,
                                placement: 'left',
                                closable: false,
                            }}
                            visible={menuVisible}
                            onVisibleChange={(visible: boolean) => {
                                if (visible) {
                                }
                                setMenuVisible(visible)
                            }}
                            submitter={false}
                            onFinish={async (values) => { }}
                        >
                            <Menu
                                onSelect={(info) => {
                                  setMenuVisible(!menuVisible)
                                    setTabActiveKeyState(info.key);
                                }}
                                style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
                                defaultSelectedKeys={'0'}
                                mode="vertical"
                                items={menuList()}
                            />
                        </DrawerForm>
                        <span style={{ marginLeft: 10 }}>采访要素匹配</span>
                    </div>
                ),
                breadcrumb: {
                    items: [],
                },
                style: {
                    paddingBlockEnd: 0,
                },
                extra: (
                    <>
                        {(access.采访要素匹配x管理员 || access.采访要素匹配x采访媒体) && <AddInterview onRefurbish={handleReload} />}
                    </>
                ),
            }}
        >
            <div>
                {currentUser?.permissions.includes('interview:page') ? <TableInterview type={tabActiveKey} reload={reload} /> : <NotAccessPage />}
            </div>
        </PageContainer>

    );
};
